import { Button, Card, Checkbox, Form, Input, message } from 'antd';
import logo from 'assets/logo.png';
import React, { Component } from 'react';
/*   学习目标：cssModule的使用注意事项   步骤：      
1. 💥css 、less、sass都可以使用除css-module技术，步骤和推荐写法相同      
2. 🔔通过驼峰式命名类名，也可以使用点语法访问      
3. css-module需要脚手架支持，React脚手架内置了配置。其它的项目需要插件支持 */
import style from './index.module.scss';
// 导入请求登录的API
import { loginAPI } from 'api/user';
import { setToken } from 'utils/storage';
export default class Login extends Component {
  // 里面包含了输入的信息
  henderOnFinish = async value => {
    try {
      console.log('value  ----->  ', value);
      // 1,调用请求接口
      const res = await loginAPI(value);
      // console.log('res  ----->  ', res);
      // 2,将token保存到本地缓存中
      // localStorage.setItem('geek-token', res.data.token);
      setToken(res.data.token);
      //3,提示用户，登录成功
      message.success('登录成功', 1);
      //4，登录成功后跳转路由
      this.props.history.push('/');
    } catch (error) {
      // 5，提示用户，哪些地方出错了
      message.warning(error.response.data.message);
    }
  };
  /*
    学习目标：defaultValue与initialValues的区别
    步骤：
       1.  Input单独使用时，可以使用defaultValue作为默认值           
           在Form中使用时Input，使用initialValues代替defaultVlaue 
       2. 
       3. 
  */
  render() {
    console.log('style  ----->  ', style);
    return (
      <div className={style.login}>
        <Card className="login-container">
          <img className="login-logo" src={logo} alt="" />
          {/* 表单 */}
          <Form onFinish={this.henderOnFinish} initialValues={{ mobile: '13811111111', code: '246810', agreement: true }}>
            <Form.Item
              name="mobile"
              rules={[
                { required: true, message: '手机号码不能为空' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
              ]}
            >
              <Input placeholder="请输入正确的手机号" />
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                { required: true, message: '验证码不能为空' },
                { pattern: /^\d{6}$/, message: '请输入6位数的验证码' }
              ]}
            >
              <Input placeholder="请输入6位数的验证码" />
            </Form.Item>

            <Form.Item
              // 自定义校验规则
              name="agreement"
              valuePropName="checked"
              rules={[
                {
                  // 自定义校验规则
                  validator: (_, value) => (value ? Promise.resolve() : Promise.reject(new Error('请勾选阅读协议')))
                }
              ]}
            >
              <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
            </Form.Item>

            <Form.Item>
              <Button block type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
